<template>
    <a-modal 
        :title="title" 
        :width="800" 
        :visible="visible" 
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭"
        wrapClassName="ant-modal-cust-warp"
        style="top:5%;height: 85%;overflow-y: hidden">

            <a-spin :spinning="confirmLoading">
                 <a-form-model ref="form"  v-bind="layout"  :model="model" :rules="validatorRules">
                     <a-form-model-item label="角色编码" required prop="roleCode">
                         <a-input v-model="model.roleCode" :disabled="roleDisabled"  placeholder="请输入角色编码"/>
                    </a-form-model-item>
                    <a-form-model-item label="角色名称" required prop="roleName">
                         <a-input v-model="model.roleName" placeholder="请输入角色名称"/>
                    </a-form-model-item>
                    <a-form-model-item label="描述" prop="description">
                     <a-textarea :rows="5" v-model="model.description" placeholder="请输入角色描述"/>
                    </a-form-model-item>
                 </a-form-model>
            </a-spin>
    </a-modal>
</template>
<script>
export default {
    name: 'RoleModal',
    data() {
        return {
            title: '操作',
            visible: false,
             roleDisabled: false,
            confirmLoading: false,
             model: {},
            layout: {
                labelCol: { span: 3 },
                wrapperCol: { span: 14 },
            },
             validatorRules:{
                roleName: [
                    { required: true, message: '请输入角色名称!' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                roleCode: [
                    { required: true, message: '请输入角色名称!'},
                    { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
                    // { validator: this.validateRoleCode}
                ],
                description: [
                    { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
                ]
        },
        }
    },
    created() {
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        add() {
             this.edit(this.modelDefault);
        },
          edit (record) {
            this.model = Object.assign({}, record);
            this.visible = true;
            //编辑页面禁止修改角色编码
            if(this.model.id){
            this.roleDisabled = true;
            }else{
            this.roleDisabled = false;
            }
         },
         close() {
              this.$refs.form.clearValidate();
                this.$emit('close');
                this.visible = false;
         },
        handleOk() {
              this.close()
        },
        handleCancel() {
             this.close()
        },
    //      validateRoleCode(rule, value, callback){
    //     if(/[\u4E00-\u9FA5]/g.test(value)){
    //       callback("角色编码不可输入汉字!");
    //     }else{
    //       let params = {
    //         tableName: "sys_role",
    //         fieldName: "role_code",
    //         fieldVal: value,
    //         dataId: this.model.id,
    //       };
    //       duplicateCheck(params).then((res)=>{
    //         if(res.success){
    //           callback();
    //         }else{
    //           callback(res.message);
    //         }
    //       });
    //     }
    //   }
    }
}
</script>